<template>
  <div class="hello">
    <mu-appbar class="title" title="Vue.js 中文社区">
      <mu-button icon slot="left" @click="changeTheme(item)">
        <img class="logo" src="https://www.vue-js.com/public/images/vue.png" />
      </mu-button>
    </mu-appbar>
  </div>
</template>
<script>
import axios from "axios";
import theme from "muse-ui/lib/theme";

export default {
  name: "hello",
  data() {
    return {
      item: true
    };
  },
  methods: {
    changeTheme(item) {
      if (item) {

        theme.use("light");
        this.item = false;
      } else {
        theme.use("dark");
        this.item = true;
      }
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  text-align: center;
  height: 5rem;
}
.logo {
  width: 40px;
  height: 40px;
}
.mu-icon-button {
  padding: 0.4rem;
}
</style>
